<template>
  <div>
    <TopBar :parentThis="myThis"
            :title="title"></TopBar>
    <div class="myBody">
      <div v-for="(item, index) in dataList"
           :key="item.text">
        <EnglishItem :parentThis="myThis"
                      @click="englishItemClickHandle(index)"
                      :class="currIndex === index ? 'currentClass' : ''"
                     :item="item"></EnglishItem>
      </div>
    </div>
    <div class="van-safe-area-bottom"></div>
  </div>
</template>

<script>
import { loadScript } from '../../libs/libs'
import TopBar from '../components/TopBar'
import EnglishItem from '../components/EnglishItem'
export default {
  name: 'BookPage',
  components: {
    TopBar,
    EnglishItem
  },
  props: {},
  data () {
    return {
      currIndex: -1,
      // dataObj: {      },
      audioButtonShow: true,
      myThis: this,
      audio: null,
      dataList: [],
      title: '',
      isLoop: false
    }
  },
  watch: {},
  computed: {},
  methods: {
    englishItemClickHandle (index) {
      console.info('englishItemClickHandle')
      this.currIndex = index
    },
    setData (ctx, next) {
      if (window.bookList[this.$route.query.objName]) {
        this.title = window.bookList[this.$route.query.objName].title
        this.dataList = window.bookList[this.$route.query.objName].dataList
      } else {
        next()
      }
    },
    loadJs (ctx,next) {
      let _this = this
      loadScript("./assets/text" + _this.$route.query.path + ".js", () => {
        _this.title = window.bookList[_this.$route.query.objName].title
        _this.dataList = window.bookList[_this.$route.query.objName].dataList
      })
    },
    init () {
      const ac = this.$getAc()
      ac.use(this.setData)
      ac.use(this.loadJs)
      ac.run()
    },
  },
  created () { },
  activated () { },
  mounted () {
    console.info('mounted bookpage.vue')
    this.init()
  },
  beforeDestroy () { }
}
</script>

<style>
</style>